<template>
  <view class="con">
    <!-- 轮播图 -->
    <swiper autoplay="true" interval="3000" circular="true" indicator-dots="true" indicator-color="#ffffff"
      indicator-active-color="#f9bf41">
      <swiper-item v-for="item in courseInfo.piclist">
        <image class="img" mode="widthFix" :src="item.pic"></image>
      </swiper-item>
    </swiper>
    <view class="ner">
      <view class="ner1">
        <view class="ner1_c1">{{courseInfo.title}}</view>
        <!-- <view class="ner1_c2">￥<text>{{courseInfo.price}}</text></view> -->
      </view>
      <view class="ner2 flex flex_between">
        <view class="ner2li" v-for="item in courseInfo.desc" v-if="item.keys">
          <image class="ner2li_img" mode="widthFix" src="/static/index/img21.png"></image>
          <text class="ner2li_t">{{item.keys}}</text>
        </view>
      </view>
    </view>
    <view class="xia">

      <image class="img" mode="widthFix" :src="courseInfo.pic"></image>
      <view class="xia1">
        <!-- <rich-text :nodes="courseInfoinfos" @getattr="imageClick"></rich-text> -->
        <u-parse :content="courseInfoinfos" @preview="preview" ></u-parse>
      </view>
    </view>
    <view class="butn flex" @click="partCouse">
      <view class="ner1_c2">￥<text>{{courseInfo.price}}</text>
      </view>参与课程
    </view>

    <view class="zhezhao" v-if="isShow" @click="hideTan"></view>
    <!-- 点击提现弹出 -->
    <view class="tan" v-if="isShow">
      <view class="tan_title">确认参与课程</view>
      <view class="tan_t flex">
        <view class="tan_t2">亲，支付完毕后请在“<text>我的</text>”页面中“<text>我的课程</text>”中获取资料哦，资料有完整流程</view>
      </view>
      <view class="tan_b flex flex_between">
        <view class="tan_b_d1" @click="hideTan">取消</view>
        <view class="tan_b_d2" @click="goPay">去支付</view>
      </view>
    </view>
  </view>
</template>

<script>
import {
    getCourseInfo, //获取课程详细
    courseInfoAddorders //课程购买
  } from '@/request/api.js'
  import uParse from '@/components/u-parse/u-parse.vue'
  export default {
    components: {
      uParse
    },
    data() {
      return {
        openid: uni.getStorageSync('openid'), //获取缓存的openid
        isLogin: uni.getStorageSync('isLogin') || 1, //是否登录授权 1是未授权；2是已授权
        userInfo: uni.getStorageSync('userInfo'), //授权后的信息
        id: '', //课程id
        title: '', //课程title
        courseInfo: {}, //课程信息
        courseInfoinfos:'',
        isShow: false

      };
    },
    onShow() {
      this.isLogin = uni.getStorageSync('isLogin') || 1
      this.getCourseInfoFun() //获取课程详细
      if (this.isLogin === 1) {
      	console.log('未授权登录')
        uni.hideShareMenu()
      }else{
        uni.showShareMenu({
        	withShareTicket: true,
        	menus: ["shareAppMessage", "shareTimeline"]
        })
      }
    },
    onLoad(options) {
      console.log('进入详情页面')
      console.log(options)
      this.id = options.id
      if (options.title) {
        uni.setNavigationBarTitle({
          title: options.title
        }); //设置标题
        this.title = options.title
      }

      this.getCourseInfoFun() //获取课程详细
      
      console.log('进入课程详细--获取options')
      const q = decodeURIComponent(options.q) // 获取到二维码原始链接内容
      console.log(options)
      console.log(options.pid)
      console.log(q)
      if (options.pid) {
      	// 通过分享页面进的
      	console.log('通过分享页面进的')
      	uni.setStorageSync('pid', options.pid)
      
      } else if (q) {
      	// 通过扫描二维码进的
      	console.log('通过扫描二维码进的')
      	var match = q.match(/\?(.+)/);
      	if (match && match.length > 1) {
      		var queryString = match[1].split("=")[1]; // 获取到的查询字符串
      		console.log('pid是多少'); // 输出: data=12345
      		console.log(queryString); // 输出: data=12345
      		uni.setStorageSync('pid', queryString)
      	} else {
      		console.log('No query string found.');
      	}
      }
    },
    methods: {
      getCourseInfoFun() {
        getCourseInfo(this.openid, this.id).then(res => {
          console.log('获取课程详细')
          console.log(res)
          if (res.error_code === 0) {
            this.courseInfo = res.data
            
            let courseInfoinfos = res.data.infos
            // courseInfoinfos = courseInfoinfos.replace(/<img([\s\w"-=/.:;]+)/ig, '<image style="width: 100%;"$1');
            // if(courseInfoinfos.indexOf('<img src="/moshangweilai.herobing.com')===-1){
            //   courseInfoinfos = courseInfoinfos.replace(/<img src="/g, '<img src="/moshangweilai.herobing.com');
            // }
            this.courseInfoinfos = courseInfoinfos
          } else {
            uni.showToast({
              icon: 'none',
              title: res.msg
            })
          }

        })
      },
      preview(src, e) {
        // do something
      },
      // 参与课程--需要先登录才能购买
      partCouse() {
        if (this.isLogin === 1) {
          console.log('未授权登录')
          uni.showToast({
            icon: 'none',
            title: '未登录，先进行授权登录'
          })
        } else {
          this.isShow = true
        }
      },
      // 去支付
      goPay() {
        // 1.先判断有没有登录
        // if(this.isLogin===1){
        //   uni.showToast({
        //     icon:'none',
        //     title:'请先登录'
        //   })
        //   setTimeout(function(){
        //     uni.navigateTo({
        //       url:'/pages/mine/index'
        //     })
        //   },500)
        //   return
        // }
        console.log('点击去支付')
        let param = {
          openid: this.openid,
          id: this.id
        }
        courseInfoAddorders(param).then(res => {
          console.log(res)
          if (res.error_code === 0) {
            //调用微信官方支付接口弹出付款界面,输入密码扣款
            // let timeStamp = res.data.timeStamp
            // let nonceStr = res.data.nonceStr
            // let package = res.data.package
            // let signType = res.data.signType
            // let paySign = res.data.paySign
            uni.requestPayment({
              provider: "wxpay",
              nonceStr: res.data.nonceStr,
              package: res.data.package,
              timeStamp: res.data.timeStamp,
              signType: res.data.signType,
              paySign: res.data.paySign,
              success(res) {
                console.log('调起支付')
                console.log(res)
                if (res.errMsg === 'requestPayment:ok') {
                  uni.showToast({
                    icon: 'none',
                    title: '支付成功'
                  })
                  setTimeout(function() {
                    uni.navigateTo({
                      url: '/packageA/mine/course'
                    })
                  }, 500)
                }
              },
              fail(err) {
                console.log('支付失败', err)
                if (err.errMsg === 'requestPayment:fail cancel') {
                  uni.showToast({
                    icon: 'none',
                    title: '支付失败'
                  })
                }
              }
            })

            // wx.requestPayment({
            //      timeStamp,  //时间戳
            //      nonceStr,   //随机字符串
            //      package,    //prepay_id
            //      signType,   //签名算法MD5
            //      paySign,    //签名
            //      success (res) {
            //        if (res.errMsg == "requestPayment:ok"){
            //           console.log('支付成功', res)
            //        }else{
            //           console.log('支付失败')
            //        }
            //      },
            //      fail (res) { 
            //        console.log('支付失败', res)
            //      }
            //   })
            // uni.requestPayment({
            //     param,
            //     success(res) {
            //       if (res.errMsg == "requestPayment:ok") {
            //         console.log('支付成功', res)
            //       } else {
            //         console.log('支付失败')
            //       }
            //     },
            //     fail(res) {
            //       console.log('支付失败', res)
            //     }
            // })
            // wx.requestPayment({
            //   timeStamp, //时间戳
            //   nonceStr, //随机字符串
            //   package, //prepay_id
            //   signType, //签名算法MD5
            //   paySign, //签名
            //   success(res) {
            //     if (res.errMsg == "requestPayment:ok") {
            //       console.log('支付成功', res)
            //     } else {
            //       console.log('支付失败')
            //     }
            //   },
            //   fail(res) {
            //     console.log('支付失败', res)
            //   }
            // })
          } else {
            uni.showToast({
              icon: 'none',
              title: res.msg
            })
          }
        })
      },

      hideTan() {
        this.isShow = false
      }
    },
    // 分享微信好友
    onShareAppMessage(event) {
      console.log(event);
      return {
        title: '陌上未来，全程保姆式陪跑',
        path: '/packageA/index/productDetail?pid=' + uni.getStorageSync('userInfo').id + '&id=' + this.id + '&title=' +
          this.title
        // imageUrl: imageUrl
      }
    },
    //分享到朋友圈
    onShareTimeline(event) {
      console.log(event);
      return {
        title: '陌上未来，全程保姆式陪跑',
        path: '/packageA/index/productDetail?pid=' + uni.getStorageSync('userInfo').id + '&id=' + this.id + '&title=' +
          this.title,
        query: 'pid=' + uni.getStorageSync('userInfo').id + '&id=' + this.id + '&title=' + this.title
        // imageUrl: imageUrl
      }
    }
  }
</script>

<style scoped lang="scss">
  .img {
    display: block;
    width: 100%;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
  }

  swiper {
    width: 100%;
    height: 690rpx;

    swiper-item {
      width: 100%;
      height: 690rpx;
    }
  }

  .ner {
    width: 100%;
    height: auto;
    margin-bottom: 20rpx;

    .ner1 {
      width: 100%;
      // border-radius: 20rpx 20rpx 0px 0px;
      background-color: rgba(255, 255, 255, 1);
      color: rgba(16, 16, 16, 1);
      font-size: 28rpx;
      padding: 40rpx 30rpx;
      box-sizing: border-box;

      .ner1_c1 {
        color: rgba(16, 16, 16, 1);
        font-size: 36rpx;
        // margin-bottom: 20rpx;
      }

      .ner1_c2 {
        color: rgba(16, 16, 16, 1);
        font-size: 24rpx;
        font-family: 'AvantGardeFont';

        text {
          font-size: 40rpx;
        }
      }
    }

    .ner2 {
      width: 100%;
      height: auto;
      border-radius: 0px 0px 20rpx 20rpx;
      background-color: rgba(232, 230, 230, 1);
      padding: 24rpx 30rpx;
      box-sizing: border-box;

      .ner2li {
        width: 33.3%;
        text-align: center;

        .ner2li_img {
          width: 32rpx;
          height: auto;
          position: relative;
          top: 5rpx;
          margin-right: 10rpx;
        }

        .ner2li_t {
          color: rgba(16, 16, 16, 1);
          font-size: 28rpx;
        }
      }
    }
  }

  .xia {
    width: 100%;
    height: auto;
    border-radius: 20rpx;
    background-color: rgba(255, 255, 255, 1);
    padding: 30rpx;
    box-sizing: border-box;

    .xia1 {
      width: 100%;
      height: auto;
      line-height: 40rpx;
      color: rgba(16, 16, 16, 1);
      font-size: 28rpx;
      margin-top: 24rpx;
      padding-bottom: 40rpx;
      /deep/ image{
        display: block !important;
         width: 100% !important;
         margin-bottom: 10rpx !important;
      }
    }
  }
  img{
    display: block !important;
     width: 100% !important;
     margin-bottom: 10rpx !important;
  }

  .butn {
    width: 100%;
    height: 84rpx;
    border-radius: 20rpx;
    text-align: center;
    line-height: 84rpx;
    background-color: rgba(249, 191, 65, 1);
    margin: 20rpx 0;
    color: rgba(16, 16, 16, 1);
    font-size: 32rpx;
    justify-content: center;

    .ner1_c2 {
      font-size: 28rpx;
      font-family: 'AvantGardeFont';
      margin-right: 20rpx;
    }
  }

  .tan_t2 {
    width: 100%;
    color: rgba(137, 137, 137, 1) !important;

    text {
      font-weight: bold;
    }
  }

  .tan {
    margin-top: -177rpx;
  }
  .wxParse{
    .strong{
      font-weight: bold;
    }
  }
  /deep/ .strong{
    font-weight: bold !important;
  }
</style>